<template>
	<view style="height: 100%;">
		<view class="uni-list">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
					<view class="list-item">
						<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.7)" />
						<view class="list-item-desc">
							<span>提型: </span>
							<span>知识点 ：</span>
							<span>答对次数/总次数: </span>
							<span>最后答题结果： </span>
							<span>最后答题时间：</span>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view class="bottom-choose flex-align-center">
			<checkbox value="cb" :checked="checkAll" style="transform:scale(0.7)" @click="checkAll=!checkAll" />全选
			<span class="choose-text">共选中{{total}}题</span>
			<view class="test-btn flex-center">
				选题自测
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				checkAll: false,
				items: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				]
			};
		},
		watch: {
			checkAll: {
				handler(val) {
					console.log(val, '参数');
					if (val === true) {
						this.items.forEach(i => {
							i.checked = true
						})
						this.total = this.items.length
					} else {
						this.items.forEach(i => {
							i.checked = false
						})
						this.total = 0
					}
				},
				deep: true,
			}
		},
		methods: {
			checkboxChange(e) {
				let trueCount = 0;
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
					if (item.checked) {
						trueCount++;
					}
				}
				this.total = trueCount;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.uni-list {
		overflow-y: auto;
		height: 90%;
	}

	.list-item {
		padding: 20rpx;
		width: 100%;
		height: px_2_vw(225);
		border: 1px solid rgba(166, 166, 166, 1);
		margin-bottom: 30rpx;
		position: relative;

		.list-item-desc {
			position: absolute;
			bottom: 20rpx;

			span {
				margin-right: 20rpx;
				font-size: px_2_vw(24);
				color: #000;
			}
		}
	}

	.bottom-choose {
		justify-content: flex-end;
		font-size: px_2_vw(24);
		color: #000;
		padding-top: 20rpx;
	}

	.choose-text {
		margin: 0 12rpx 0 35rpx;
		color: #696565;
		font-size: px_2_vw(24);
	}

	.test-btn {
		background-color: #0734FA;
		width: px_2_vw(103);
		height: px_2_vw(45);
		font-size: px_2_vw(20);
		color: #fff;
		border-radius: 65rpx;
	}
</style>